<template>
  <div class="wrap">
    <div class="wrap_header">
      <div class="wrap_headerTitle">
        <div class="wrap_headerTitleRow">
          <span @click="left" class="iconfont icon-arrow-left-copy-copy"></span>
        </div>
        <div class="wrap_headerTitleRow">
          <h4>美可玩故事</h4>
        </div>
        <div class="wrap_headerTitleRow">
          <div class="wrapBox">
            <span class="iconfont icon-sandian"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap_content_title">Maco为你服务</div>

    <ul
      ref="wrap_content"
      @click="ulEvent"
      :class="isShow === true ? 'wrap_content active' : 'wrap_content'"
    >
      <li
        :class="item.type === '0' ? 'leftLi' : 'rightLi'"
        v-for="(item, index) in $store.state.chat.chatList"
        :key="index"
      >
        <img
          :src="
            item.type === '0'
              ? '../../../static/img/图片 Copy@1x.png'
              : '../../../static/img/图片 Copy 6@1x.png'
          "
        />
        <span v-show="item.expression === '0'">{{ item.msg }}</span>
        <span v-show="item.expression !== '0'">
          <img :src="item.msg" />
        </span>
      </li>
    </ul>
    <div :class="isShow === true ? 'wrap_footers active' : 'wrap_footers'">
      <div class="wrap_footer">
        <div class="wrap_footerRow">
          <input
            @keyup="keyboarEvent($event)"
            class="wrap_footerRowInput"
            v-model="inputVal"
            type="text"
            placeholder=""
            @input='word'
          />
        </div>
        <div class="wrap_footerRow">
          <span
            @click="expressionEvent"
            class="iconfont icon-lianxiaolianmanyi-3"
          ></span>
          <span
            v-if="isSend === 0 ? true : false"
            class="iconfont icon--tainjia"
          ></span>
          <span v-if="isSend === 1 ? true : false" class="spans">
            <i @click="sendEvent">发送</i>
          </span>
        </div>
      </div>
      <div class="container">
        <div
          @click="expressEvent(item)"
          ref="container_row_id"
          class="container_row_id"
          v-for="(item, index) in $store.state.chat.imgList"
          :key="index"
        >
          <img :src="item.path" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sensitiveWord from '../../js/sensitiveWord'
export default {
  name: "kefu",
  data() {
    return {
      inputVal: "",
      footerFlag: false,
      isShow: false,
      isSend: 0,
      nowIndex: "",
      info: "",
    };
  },
  mounted() {
    this.$store.dispatch("chat/getExpression"); //获取页面上所有的·表情包；
    this.$store.dispatch("chat/getData"); //获取默认得客服聊天样式；
  },
  methods: {
    expressEvent(info) {
      this.isSend = 1;
      this.info = info;
    },
    left() {
      this.$router.push({
        path: "/my",
      });
    },
    ulEvent() {
      this.isShow = false;
      this.isSend = 0;
    },
    sendEvent() {
      if (this.inputVal === "") {
        // 仿存数据；
        this.$store.commit("chat/addExpression", {
          type: 1,
          msg: this.info.path,
          expression: "1",
        });

        this.$store.commit("chat/sendExpression", this.info);
        this.info = "";
      }
    },
    expressionEvent() {
      this.isShow = true;
    },
    keyboarEvent(e) {
      if (e.keyCode == 13) {
        if (this.inputVal !== "") {
          // 键盘抬起存入vuex
          this.$store.commit("chat/addChatMsg", {
            type: 1,
            msg: this.inputVal,
            expression: "0",
          });
          this.inputVal = "";
        }
      }
    },
    word() {
      sensitiveWord.forEach((item, index) => {
        if (this.inputVal.indexOf(item) !== -1) {
            this.inputVal=this.inputVal.replace(`${item}`,"*")
        }
      });
    },
  },
  activated() {},
  deactivated() {},
};
</script>
<style scoped>
/* @import url("../../assets/font/iconfont.css"); */
@import url("../../../assets/font/iconfont.css");
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  height: 736px;
  background-color: #fff;
  position: fixed;
  z-index: 111;
}
.wrap_header {
  width: 100vw;
  height: 43px;
  box-shadow: 0px 1px #ededed;
  background-color: #ededed;
}
/*  copy——Maco*/
.wrap_headerTitle {
  width: 100%;
  height: 43px;
  display: flex;
  line-height: 43px;
}
.wrap_headerTitleRow:nth-child(1) {
  flex: 0.1;
}
.wrap_headerTitleRow:nth-child(1) span {
  font-size: 25px;
  color: #000;
  margin-left: 10px;
  display: inline-block;
  margin-top: 1px;
}
.wrap_headerTitleRow:nth-child(2) {
  flex: 0.8;
  text-align: center;
}
.wrap_headerTitleRow:nth-child(3) {
  flex: 0.1;
}
.wrap_content_title {
  width: 100%;
  height: 30px;
  font-size: 13px;
  color: #ededed;
  text-align: center;
  line-height: 30px;
}
.wrap_content {
  width: 100vw;
  height: calc(736px - 130px);
  overflow-y: auto;
  font-size: 13px;
  padding: 20px;
}
.wrap_content.active {
  height: calc(736px - 200px);
}
/*  */
.bag {
  width: 100%;
  height: 50px;
  display: block;
  overflow: hidden;
  clear: both;
}
/* .bag div{
} */
.wrap_content .leftLi {
  width: 100%;
  height: 50px;
  display: block;
  clear: both;
  overflow: hidden;
}
.wrap_content .leftLi img {
  float: left;
  width: 42px;
  height: 42px;
}
.wrap_content .leftLi span {
  float: left;
  height: 42px;
  line-height: 42px;
  margin-left: 5px;
}
.wrap_content .leftLi span img {
  width: 30px;
  height: 30px;
  margin-top: 7px;
}
.wrap_content .rightLi {
  width: 100%;
  height: 50px;
  display: block;
  clear: both;
  overflow: hidden;
}
.wrap_content .rightLi img {
  float: right;
  width: 38px;
  height: 38px;
}
.wrap_content .rightLi span {
  float: right;
  height: 42px;
  line-height: 42px;
  margin-right: 5px;
}
.wrap_content .rightLi span img {
  width: 30px;
  height: 30px;
  margin-top: 7px;
}
/* add div */
.wrap_content .rightLi div {
  float: right;
  height: 42px;
  line-height: 42px;
  margin-right: 5px;
}
.wrap_content .rightLi div img {
  float: right;
}

/*  */
.wrap_footers {
  width: 100vw;
  height: 200px;
  position: fixed;
  bottom: -151px;
  transition: all 0.5s linear;
  border-radius: 35px 35px 0 0;
}
.wrap_footer {
  width: 100vw;
  border-radius: 35px 35px 0 0;
  background-color: white;
  height: 50px;
  display: flex;
  box-shadow: 0px 1px #cccccc;
}
.wrap_footers.active {
  bottom: 0px;
}
.wrap_footerRow:nth-child(1) {
  flex: 0.2;
  text-align: center;
  line-height: 50px;
  margin-left: 15px;
}

.wrap_footerRow:nth-child(1) {
  flex: 0.8;
  line-height: 50px;
}
.wrap_footerRow:nth-child(2) {
  display: flex;
}
.wrap_footerRow:nth-child(2) span {
  flex: 1;
  margin: 0 10px;
}

.wrap_footerRow:nth-child(2) span:nth-child(1) {
  text-align: center;
  line-height: 50px;
  font-size: 27px;
}
.wrap_footerRow:nth-child(2) span:nth-child(2) {
  text-align: center;
  line-height: 51px;
  font-size: 22px;
}
/* input样式 */
.wrap_footerRowInput {
  display: inline-block;
  width: 300px;
  height: 30px;
  background-color: #f4f4f4;
  text-align: left;
  line-height: 30px;
  font-size: 15px;
  border: none;
  outline: none;
}
/* 改变input字体 */
.wrap_footerRowInput::-webkit-input-placeholder {
  font-size: 15px;
  color: #0c1212;
  font-weight: bold;
}
.container {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}
/* 200/5 40 */
.container_row_id {
  width: 82px;
  height: 38px;
  text-align: center;
}
.container_row_id.active {
  border: 1px solid #cccccc;
}
.container_row_id img {
  width: 36px;
  height: 36px;
}

.spans i {
  font-size: 13px;
  display: inline-block;
  height: 30px;
  width: 100%;
  line-height: 30px;
  text-align: center;
  font-style: normal;
}
</style>